/**
* @file 充值中心
* @author 张超
* @created 2023/7/05 08:00
* @updated 2023/7/05 18:00
*/
<template>
	<view class="recharge">
		<u-tabs :list="list" active-color="#b78c3d" :is-scroll="false" :current="current" @change="change123"></u-tabs>
		<view class="cont">
			<view class="recharge_mouy">
				<view class="mouy-title">充值金额</view>
				<view class="mouy-titledes" v-if="current==1">用于直购商城消费</view>
				<ul>
					<li v-for="(item,index) in moneyList" :key="index" @click="select(item,index)"
						:class="currentwe==index?'active':''">
						<view>
							<text>{{item.integral}}</text>
							<text>{{current==0?'金币':'积分'}}</text>
						</view>
						<view>¥{{item.money}}</view>
					</li>
				</ul>
			</view>
			<view class="recharge_mouy">
				<view class="mouy-title">自定义充值</view>
				<input class="mouy-input" v-model="zdmoney" @blur="blur" type="text" placeholder="请输入充值金额">
			</view>
			<view class="recharge-zhif">
				<view>选择支付方式</view>
				<u-radio-group v-model="type" @change="radioGroupChange" v-for="(item, index) in list1" :key="index">
					<view>
						<image :src="item.img"></image>
						<text>{{item.text}}</text>
					</view>
					<u-radio @change="radioChange" :name="item.name" :disabled="item.disabled">
					</u-radio>
				</u-radio-group>
			</view>

			<view class="recharge_btn" @click="priceCommitRe">确认</view>
		</view>
	</view>
</template>

<script>
	import {
		priceConfig,
		priceCommit,
		submit,
		priceWechat,
		priceAli
	} from '@/network/api.js'
	import rechargeItem from "@/components/recharge_item.vue";
	export default {
		data() {
			return {
				// list: [{
				// 	name: '金币'
				// }, {
				// 	name: '消费积分'
				// }],
				current: 0,
				listItem: {},
				list1: [{
						name: 'alipay',
						disabled: false,
						text: '支付宝',
						img:'/static/my/zhifubao.png'
					},
					{
						name: 'wechat',
						disabled: false,
						text: '微信',
						img:'/static/my/weixi.png'
					}
				],
				currentwe: -1,
				moneyList: [],
				// 支付方式
				type: 'alipay',
				// 选中金额
				item: {},
				// 当前栏id
				id: '',
				// 自定义充值金额/积分
				zdmoney:'',
				// 判断是否为自定义充值,1自定义
				typew:'',
				// 自定义充值数据
				item1:{}
			}
		},
		components: {
			rechargeItem
		},
		onLoad(option) {
			this.priceConfigRe()
		},
		methods: {
			// 跳转到充值记录
			onNavigationBarButtonTap(e) {
				uni.navigateTo({
					url:'/pages/subpackage/my/rechargejil'
				})
			},
			priceConfigRe() {
				// 获取交易配置数据
				priceConfig().then(res => {
					if (res.code == 1) {
						this.listItem = res.data[this.current]
						this.ozhuanz()
					}
				})
			},
			change123(index) {
				this.current = index;
				this.priceConfigRe()
			},
			// 对象转数组
			ozhuanz() {
				let data1 = JSON.parse(this.listItem.json)
				let arr = [];
				for (let key in data1) {
					arr.push({
						money: data1[key], // label 字段
						integral: key, // value字段
					});
				}
				this.moneyList = arr
				// this.item=this.moneyList[0]
			},
			select(item, index) {
				this.typew=2
				this.zdmoney=''
				this.currentwe = index
				this.item = item
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
				this.type = e
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			// 充值自定义金额
			blur(){
				this.typew=1
				this.currentwe=-1
				this.item1.integral=this.zdmoney
				this.item1.money=this.zdmoney
			},
			// 提交订单——充值中心
			priceCommitRe() {
				let data1 = {
					score: this.item.integral,
					money: this.item.money,
					typeid:this.current+1
				}
				let data2 = {
					score: this.item1.integral,
					money: this.item1.money,
					typeid:this.current+1
				}
				let data
				// typew==1为自定义充值
				if(this.typew==1){
					data=data2
				}else{
					data=data1
				}
				console.log(data,'充值请求参数')
				priceCommit(data).then(res => {
					if (res.code == 1) {
						let data_pay = {
							out_trade_no: res.data.out_trade_no,
							title: res.data.title,
							amount: res.data.amount,
						}
						console.log('开始支付')
						if (this.type == 'alipay') {
							console.log('开始支付宝支付')
							priceAli(data_pay).then(res => {
							console.log(res,'开始支付宝支付')
								if (res.code == 1) {
									//开始跳转到支付宝发起支付
									let resultWechat = res.data.data;
									let scheme_url = resultWechat.jump_url;
									console.log(scheme_url,'跳转链接')
									plus.runtime.openURL(scheme_url, (error) => {
									  if (error) {
									    uni.showToast({ title: '打开失败，请检查支付宝安装', icon: 'none' });
									  }
									});
								}
							})
						} else {
							priceWechat(data_pay).then(res => {
								if (res.code == 1) {
									//开始跳转到微信发起支付
									let resultWechat = res.data.data;
									let scheme_url = JSON.parse(resultWechat.miniapp_data).scheme_code;
									plus.runtime.openURL(scheme_url, (error) => {
									  if (error) {
									    uni.showToast({ title: '打开失败，请检查微信安装', icon: 'none' });
									  }
									});
								}
							})
						}
						
					}
				})
			},
			// 提交订单——充值中心
			// priceCommitRe() {
			// 	let data1 = {
			// 		score: this.item.integral,
			// 		money: this.item.money,
			// 		typeid:this.current+1
			// 	}
			// 	let data2 = {
			// 		score: this.item1.integral,
			// 		money: this.item1.money,
			// 		typeid:this.current+1
			// 	}
			// 	let data
			// 	// typew==1为自定义充值
			// 	if(this.typew==1){
			// 		data=data2
			// 	}else{
			// 		data=data1
			// 	}
			// 	console.log(data,'充值请求参数')
			// 	priceCommit(data).then(res => {
			// 		if (res.code == 1) {
			// 			let data1 = {
			// 				out_trade_no: res.data.out_trade_no,
			// 				title: res.data.title,
			// 				amount: res.data.amount,
			// 				type: this.type,
			// 				notifyurl: '/addons/epay/api/notifyx?type=' + this.type
			// 			}
			// 			uni.request({
			// 				url: 'https://huijiank.com/addons/epay/api/submit',
			// 				data: data1,
			// 				method:'POST',
			// 				success: (ress) => {
			// 					if (this.type == 'alipay') {
			// 						uni.requestPayment({
			// 							provider: this.type,
			// 							orderInfo: ress.data,
			// 							success: function(res) {
			// 								uni.showToast({
			// 									title: '支付成功',
			// 									icon: 'none',
			// 									duration: 3000,
			// 								})
			// 							},
			// 							fail: function(err) {
			// 								uni.showToast({
			// 									title: '支付失败',
			// 									icon: 'none',
			// 									duration: 3000,
			// 								});
			// 							}
			// 						})
			// 					} else {
			// 						uni.requestPayment({
			// 							provider: 'wxpay',
			// 							orderInfo: ress.data,
			// 							success: function(res) {
			// 								uni.showToast({
			// 									title: '支付成功',
			// 									icon: 'none',
			// 									duration: 3000,
			// 								})
			// 							},
			// 							fail: function(err) {
			// 								uni.showToast({
			// 									title: '支付失败',
			// 									icon: 'none',
			// 									duration: 3000,
			// 								});
			// 							}
			// 						})
			// 					}
			// 				}
			// 			})
			// 		}
			// 	})
			// },
		},
	}
</script>

<style lang="scss">
	.recharge {
		height: 100vh;
		background-color: #F3F3F3;

		.cont {
			margin: 0 20rpx;
		}
	}

	// .recharge_item {
	// 	margin-top: 20rpx;

	.recharge_mouy {
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
		background-color: #ffffff;
		
		.mouy-input{
			margin:20rpx 0;
			font-size: 25rpx;
		}

		.mouy-title {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
		}

		.mouy-titledes {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
			font-family: PingFang SC, PingFang SC-Medium;
		}

		>ul {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			justify-content: space-between;

			.active {
				border: 1rpx solid #B27715;
				background-color: #FFEFCB;
			}

			>li {
				display: flex;
				flex-direction: column;
				width: 30%;
				height: 112rpx;
				text-align: center;
				line-height: 112rpx;
				padding: 20rpx 10rpx;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				box-sizing: border-box;
				border: 1rpx solid #EAEAEA;

				>view:nth-child(1) {
					height: 36rpx;
					line-height: 36rpx;
					margin-bottom: 12rpx;
					font-family: PingFang SC, PingFang SC-Medium;

					>text:nth-child(1) {
						font-size: 44rpx;
					}

					>text:nth-child(2) {
						font-size: 20rpx;
					}
				}

				>view:nth-child(2) {
					height: 17rpx;
					line-height: 17rpx;
					font-size: 22rpx;
					margin-top: 10rpx;
					font-family: PingFang SC, PingFang SC-Medium;
				}
			}

			>li:last-child:nth-child(3n - 1) {
				margin-right: calc(33.33% + 4% / 3);
			}

			/* 如果最后一行是2个元素 */
			>li:last-child:nth-child(3n - 2) {
				margin-right: calc(60% + 8% / 3);
			}
		}
	}

	.recharge-zhif {
		height: 300rpx;
		padding: 40rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;

		>view:nth-child(1) {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
		}

		.u-radio-group {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 34rpx 0;

			>view:nth-child(1) {
				display: flex;
				align-items: center;

				>image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 20rpx;
				}
			}

			.u-radio {
				margin-left: auto;
			}
		}
	}

	.recharge_btn {
		width: 690rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 0 auto;
		margin-top: 100rpx;
		font-size: 36rpx;
		color: #fff;
		font-family: PingFang SC, PingFang SC-Medium;
		background: linear-gradient(0deg, #b07412 0%, #e3ba5b 100%);
		border-radius: 4px;
	}

	.recharge_btn:active {
		background: linear-gradient(0deg, #e3ba5b 0%, #e3ba5b 100%);
	}

	// }
</style>